<template>
  <div class="statistics-container">
    <el-card class="statistics-card">
      <template #header>
        <div class="card-header">
          <span>访客统计数据</span>
          <el-button type="primary" size="small" @click="fetchData">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </template>

      <!-- 添加统计卡片 -->
      <div class="statistics-summary">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="data-card total">
              <div class="label">总访客数</div>
              <div class="value">{{ totalVisitors }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="data-card named">
              <div class="label">留名访客数</div>
              <div class="value">{{ namedVisitors }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="data-card rate">
              <div class="label">留名率</div>
              <div class="value">{{ namedRate }}%</div>
            </div>
          </el-col>
        </el-row>
      </div>

      <div id="visitorChart" style="width: 100%; height: 400px"></div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import { Refresh } from "@element-plus/icons-vue";
import request from "@/utils/request";

// 添加统计数据的ref
const totalVisitors = ref(0);
const namedVisitors = ref(0);
const namedRate = computed(() => {
  if (totalVisitors.value === 0) return 0;
  return Math.round((namedVisitors.value / totalVisitors.value) * 100);
});

// 获取总访客数和留名访客数
const fetchTotalStats = async () => {
  try {
    // 获取总访客数
    const totalResponse = await request({
      url: "/api/v1/visitor/getAllSize",
      method: "post",
    });
    totalVisitors.value = totalResponse.data;

    // 获取留名访客数
    const namedResponse = await request({
      url: "/api/v1/visitor/getAllWithNameSize",
      method: "post",
    });
    namedVisitors.value = namedResponse.data;
  } catch (error) {
    console.error("获取访客统计数据失败:", error);
    ElMessage.error("获取统计数据失败");
  }
};

// 获取图表统计数据
const fetchData = async () => {
  try {
    await fetchTotalStats(); // 先获取总数据

    const response = await request({
      url: "/api/v1/visitor/statistics",
      method: "get",
    });

    if (response.data) {
      initChart(response.data);
    }
  } catch (error) {
    console.error("获取访客统计数据失败:", error);
    ElMessage.error("获取统计数据失败");
  }
};

// 初始化图表
const initChart = (data) => {
  const chartDom = document.getElementById("visitorChart");
  if (!chartDom) return;

  const myChart = echarts.init(chartDom);

  const option = {
    title: {
      text: "访客统计趋势",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["总访客", "留名访客"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: data.dates,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "总访客",
        type: "line",
        stack: "Total",
        areaStyle: {},
        data: data.totalVisitors,
      },
      {
        name: "留名访客",
        type: "line",
        stack: "Total",
        areaStyle: {},
        data: data.namedVisitors,
      },
    ],
  };

  myChart.setOption(option);

  window.addEventListener("resize", () => {
    myChart.resize();
  });
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped lang="scss">
.statistics-container {
  padding: 20px;

  .statistics-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .statistics-summary {
      margin-bottom: 30px;

      .data-card {
        padding: 20px;
        border-radius: 8px;
        text-align: center;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .label {
          font-size: 14px;
          color: #909399;
          margin-bottom: 8px;
        }

        .value {
          font-size: 24px;
          font-weight: bold;
        }
      }

      .total {
        background-color: #ecf5ff;
        .value {
          color: #409eff;
        }
      }

      .named {
        background-color: #f0f9eb;
        .value {
          color: #67c23a;
        }
      }

      .rate {
        background-color: #fdf6ec;
        .value {
          color: #e6a23c;
        }
      }
    }
  }
}
</style>
